<template>
  <div class="switch-wrapper" v-bind="$attrs">
    <div
      class="switch-container"
      :class="{
        'switch-active': modelValue,
        'switch-disabled': disabled,
      }"
      @click="handleToggle"
    >
      <div class="switch-track">
        <div class="switch-thumb">
          <div class="switch-thumb-inner"></div>
        </div>
      </div>
    </div>
    <div class="switch-label" v-if="label" @click="handleToggle">
      {{ label }}
    </div>
  </div>
</template>

<script>
export default {
  name: "SwitchComponent",
  props: {
    modelValue: {
      type: Boolean,
      default: false,
    },
    label: {
      type: String,
      default: "",
    },
    disabled: {
      type: Boolean,
      default: false,
    },
  },
  emits: ["update:modelValue", "change"],
  methods: {
    handleToggle () {
      if (this.disabled) return;

      const newValue = !this.modelValue;
      this.$emit("update:modelValue", newValue);
      this.$emit("change", newValue);
    },
  },
};
</script>

<style lang="less" scoped>
@primary-color: #4b58dc;

.switch-wrapper {
  display: inline-flex;
  align-items: center;
  gap: 8px;

  .switch-container {
    position: relative;
    cursor: pointer;
    transition: all 0.3s ease;

    &:hover:not(.switch-disabled) {
      transform: translateY(-1px);
      filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.1));
    }

    &.switch-disabled {
      cursor: not-allowed;
      opacity: 0.6;
    }

    .switch-track {
      width: 48px;
      height: 24px;
      background: #dcdfe6;
      border-radius: 12px;
      position: relative;
      transition: all 0.3s ease;
      border: 1px solid #dcdfe6;

      &:after {
        content: "";
        position: absolute;
        top: -2px;
        left: -2px;
        right: -2px;
        bottom: -2px;
        border-radius: 14px;
        background: linear-gradient(
          45deg,
          rgba(255, 255, 255, 0),
          rgba(255, 255, 255, 0.3),
          rgba(255, 255, 255, 0)
        );
        opacity: 0;
        transition: opacity 0.3s ease;
        pointer-events: none;
      }

      .switch-thumb {
        width: 20px;
        height: 20px;
        background: #fff;
        border-radius: 50%;
        position: absolute;
        top: 2px;
        left: 2px;
        transition: all 0.3s cubic-bezier(0.68, -0.55, 0.27, 1.55);
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
        display: flex;
        align-items: center;
        justify-content: center;

        .switch-thumb-inner {
          width: 8px;
          height: 8px;
          border-radius: 50%;
          background: #dcdfe6;
          transition: all 0.3s ease;
        }
      }
    }

    &:hover:not(.switch-disabled) .switch-track:after {
      opacity: 1;
    }

    &.switch-active {
      .switch-track {
        background: linear-gradient(
          135deg,
          @primary-color,
          lighten(@primary-color, 15%)
        );
        border-color: @primary-color;
        box-shadow: 0 0 0 2px rgba(75, 88, 220, 0.2);

        .switch-thumb {
          left: 26px;
          background: #fff;
          box-shadow: 0 2px 8px rgba(75, 88, 220, 0.3);

          .switch-thumb-inner {
            background: @primary-color;
            animation: switchPulse 0.3s ease;
          }
        }
      }
    }
  }

  .switch-label {
    font-size: 14px;
    color: #606266;
    cursor: pointer;
    transition: color 0.3s ease;
    user-select: none;

    &:hover {
      color: @primary-color;
    }
  }

  &:hover .switch-label {
    color: @primary-color;
  }
}

@keyframes switchPulse {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
  }
}
</style>
